<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>{{$site_title}}</title>
    <meta name="description" content="{{$site_description}}">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="csrf-token" content="{{csrf_token()}}">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>

    <link rel="stylesheet" href="{{asset('/org/site')}}/AmazeUI-2.4.2/assets/css/amazeui.min.css"/>
    <link href="{{asset('/org/site')}}/css/dlstyle.css" rel="stylesheet" type="text/css">
    <script src="{{asset('/org/site')}}/AmazeUI-2.4.2/assets/js/jquery.min.js"></script>
    {{--<script src="{{asset('/org/plus')}}/jquery.min.js"></script>--}}
    <script src="{{asset('/org/site')}}/AmazeUI-2.4.2/assets/js/amazeui.min.js"></script>
    @include('admin.layouts._hdjs')
    @include('admin.layouts._message')
</head>

<body>

<div class="login-boxtitle">
    <a href="{{route('user.login')}}">
        <img alt="" src="{{asset('/org/site')}}/logo/elephant.png" title="登陆网站"/>
    </a>
</div>

<div class="res-banner">
    <div class="res-main">
        <div class="login-banner-bg"><span></span><img src="{{asset('/org/site')}}/images/big.jpg"/></div>
        <div class="login-box">

            <div class="am-tabs" id="doc-my-tabs">
                <ul class="am-tabs-nav am-nav am-nav-tabs am-nav-justify">
                    <li class="am-active"><a href="">邮箱注册</a></li>
                    <li style="visibility: hidden"><a href="">手机号注册</a></li>
                </ul>
                {{--邮箱登陆页面--}}
                <div class="am-tabs-bd">
                    <div class="am-tab-panel am-active">
                        <form method="post" id="email_form" action="{{route('user.register')}}">
                            @csrf
                            <div class="user-email">
                                <label for="email"><i class="am-icon-envelope-o"></i></label>
                                <input type="email" name="email" required value="{{old('email','')}}" id="email"
                                       placeholder="请输入注册邮箱">
                            </div>
                            <div class="verification">
                                <label for="code"><i class="am-icon-code-fork"></i></label>
                                <input type="email" name="code" placeholder="请输入验证码">
                                <button id="dyMobileButton"  type="button" style="width: 30%">获取验证码</button>
                            </div>
                            <script>
                                $("#dyMobileButton").click(function () {
                                    let email = $("input[name='email']").val();
                                    //如果用户没有填邮箱,就先提示用户填完邮箱后在进行下一步的操作
                                    if (!email) {
                                        require(['hdjs'], function (hdjs) {
                                            hdjs.swal({
                                                text: "请先输入邮箱再注册!",
                                                button: false,
                                                icon: 'warning'
                                            })
                                        })
                                        return false;
                                    }
                                    //用户填过邮箱后就可以发送异步请求到后台发送邮箱验证码
                                    $.post("{{route('common.code.send')}}",
                                        {username: email},
                                        function (res) {
                                            if (res.code == 1) {
                                            require(['hdjs'],function (hdjs) {
                                                hdjs.swal({
                                                    text:"验证码发送成功,请去邮箱查看验证码!",
                                                    button:false,
                                                    icon:'success'
                                                })
                                            });
                                            // 验证码发送成功后用jquery让发送验证码的按钮失效10秒钟
                                                $("#dyMobileButton").attr('disabled',true);
                                                setTimeout(()=>{$("#dyMobileButton").attr('disabled',false)},10000)
                                            }
                                        })
                                })
                                //这里通过邮箱发送验证码是通过异步处理的

                            </script>
                            <div class="user-pass">
                                <label for="password"><i class="am-icon-lock"></i></label>
                                <input type="password" name="password" id="password_email" placeholder="设置密码">
                            </div>
                            <div class="user-pass">
                                <label for="passwordRepeat"><i class="am-icon-lock"></i></label>
                                <input type="password" name="password_confirmation" id="passwordRepeat_email"
                                       placeholder="确认密码">
                            </div>
                        </form>
                        <div class="login-links-linshi">
                            <label for="reader-email">
                                <input id="reader_email" onclick="agree(this)" value="0" type="checkbox">
                                点击表示您同意商城《服务协议》
                            </label>
                        </div>
                        <div class="am-cf">
                            <input type="button" onclick="email()" name="" value="注册"
                                   class="am-btn am-btn-primary am-btn-sm am-fl">
                        </div>

                    </div>
                    <script>
                        {{--邮箱发送验证码js--}}

                        //这个模板id="reader_email"这个checkbox框有个问题就是无论这个checkbox框选没有选中值都是一样的,我试了半天也没找到这个问题的原因,与其找原因还不如自己重新写个js调整下就行了.下面的js一点儿都不复杂就能达到我的效果
                        //自己写个js把这个模板的问题调整下就行了,
                        function agree(obj) {
                            let num = $(obj).val() * 1;
                            if (num) {
                                // alert(1);
                                $(obj).val("0");
                            } else {
                                $(obj).val("1");
                                // alert(0);
                            }
                            // alert($(obj).val());
                        }
                        //用户点击注册的时候会触发下面的js方法
                        function email() {
                            // console.log($('#password_email').val());
                            //这个模板也太坑爹了,好多原来的样式都不能用得自己重新写js,当form表单input输入框中没有填东西的话值为''(空字符串),而不是null
                            if ($('#password_email').val() == '' || $('#email').val() == '') {
                                require(['hdjs'], function (hdjs) {
                                    hdjs.swal({
                                        text: "邮箱和密码不能为空",
                                        button: false,
                                        icon: 'warning'
                                    })
                                })
                                return false;
                            }
                            //判断是否同意协议,同意协议就提交,否则就不提交
                            if ($('#reader_email').val() * 1) {
                                $('#email_form').submit();
                            } else {
                                require(['hdjs'], function (hdjs) {
                                    hdjs.swal({
                                        text: "请先同意协议",
                                        button: false,
                                        icon: 'warning'
                                    })
                                })
                            }
                        }
                    </script>

                    {{--手机注册页面--}}
                    {{--
                    <div class="am-tab-panel">
                        <form method="post">
                            <div class="user-phone">
                                <label for="phone"><i class="am-icon-mobile-phone am-icon-md"></i></label>
                                <input type="tel" name="" id="phone" placeholder="请输入手机号">
                            </div>
                            <div class="verification">
                                <label for="code"><i class="am-icon-code-fork"></i></label>
                                <input type="tel" name="" id="code" placeholder="请输入验证码">
                                <a class="btn" href="javascript:;" onclick="sendMobileCode();"
                                   id="sendMobileCode">
                                    <span id="dyMobileButton">获取</span></a>
                            </div>
                            <div class="user-pass">
                                <label for="password"><i class="am-icon-lock"></i></label>
                                <input type="password" name="" id="password_phone" placeholder="设置密码">
                            </div>
                            <div class="user-pass">
                                <label for="passwordRepeat"><i class="am-icon-lock"></i></label>
                                <input type="password" name="" id="passwordRepeat_phone" placeholder="确认密码">
                            </div>
                        </form>
                        <div class="login-links">
                            <label for="reader-me">
                                <input id="reader_phone" type="checkbox"> 点击表示您同意商城《服务协议》
                            </label>
                        </div>
                        <div class="am-cf">
                            <input type="submit" name="" value="注册" class="am-btn am-btn-primary am-btn-sm am-fl">
                        </div>
                        <hr>
                    </div>
                    --}}
                </div>
            </div>

        </div>
    </div>
</div>
@include('site.layouts._bottom')
</body>

</html>
